<template>
  <div class="content">
    <div style="">新品补料申请</div>
    <el-form :model="ruleForm" label-width="140px" class="ruleForm" id="form">
      <div style="display: block; width: 800px; margin-left: 200px">
        <el-form-item label="员工码" class="item">
          <el-input v-model="ruleForm.staff" readonly></el-input>
        </el-form-item>
        <el-form-item label="产品码" class="item" label-width="">
          <el-input v-model="ruleForm.code" ref="input" readonly></el-input>
        </el-form-item>
        <el-form-item label="产品规格" class="item">
          <el-input v-model="ruleForm.specs" ref="input" readonly></el-input>
        </el-form-item>
        <el-form-item label="工序码" class="item">
          <el-input
            v-model="ruleForm.production"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="模具编码" style="margin-left: 100px">
          <el-checkbox-group
            v-model="checkList"
            style="
              height: 200px;
              width: 466px;
              overflow: scroll;
              border: solid 1px;
            "
          >
            <el-checkbox
              style="text-align: left"
              v-for="item in list"
              :label="item.number"
              >{{ item.number }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </div>

      <!-- <el-button type="info" @click="query()">模拟查询</el-button> -->
    </el-form>

    <el-form
      :model="replenishment"
      :rules="rules"
      class="replenishment"
      ref="replenishment"
      label-width="120px"
      id="printMe"
    >
      <div class="line">
        <div class="line-left">
          <el-form-item label="客户">
            <el-input
              v-model="replenishmentParams.customer"
              disabled
            ></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="客户订单号">
            <el-input
              v-model="replenishmentParams.custOrderNo"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="line">
        <div class="line-left">
          <el-form-item label="订单号">
            <el-input v-model="replenishment.orderNo" disabled></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="模具编号">
            <el-input v-model="replenishment.number" disabled></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="规格">
            <el-input v-model="replenishment.specs" disabled></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="工艺">
            <el-input v-model="replenishment.production" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="line">
        <div class="line-left">
          <el-form-item label="原石供应商">
            <el-input v-model="replenishment.roughSupplier" disabled></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="原石料号">
            <el-input
              v-model="replenishmentParams.rough_item_no"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="公差上限">
            <el-input
              v-model="replenishmentParams.tolerance_up"
              disabled
            ></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="公差下限">
            <el-input
              v-model="replenishmentParams.tolerance_down"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="压缩角公差上限">
            <el-input
              v-model="replenishmentParams.compress_up"
              disabled
            ></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="压缩角公差下限">
            <el-input
              v-model="replenishmentParams.compress_down"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="定经公差上限">
            <el-input
              v-model="replenishmentParams.dingjing_up"
              disabled
            ></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="定经公差下限">
            <el-input
              v-model="replenishmentParams.dingjing_down"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="外壳尺寸">
            <el-input
              v-model="replenishmentParams.shell_size"
              disabled
            ></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="激光参数-角度">
            <el-input
              v-model="replenishmentParams.laser_param_angle"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="激光参数-上限1">
            <el-input
              v-model="replenishmentParams.laser_param_up1"
              disabled
            ></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="激光参数-上限2">
            <el-input
              v-model="replenishmentParams.laser_param_up2"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="激光参数-下限1">
            <el-input
              v-model="replenishmentParams.laser_param_down1"
              disabled
            ></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="激光参数-下限2">
            <el-input
              v-model="replenishmentParams.laser_param_down2"
              disabled
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="责任部门">
            <el-select
              v-model="replenishment.dept"
              placeholder="请选择责任部门"
              @change="deptChange()"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in depart"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="不良原因">
            <el-select
              v-model="replenishment.reason"
              placeholder="请选择拒绝原因"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in rejectReason"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="责任设备">
            <el-input v-model="replenishment.equipmentName"></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="设备编号">
            <el-input v-model="replenishment.equipmentNumber"></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="line">
        <div class="line-left">
          <el-form-item label="可做规格">
            <el-input v-model="replenishment.useSpecs"></el-input>
          </el-form-item>
        </div>
        <div class="line-right">
          <el-form-item label="角度">
            <el-input v-model="replenishment.angle"></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset()"> 清空数据</el-button>
      <el-button type="primary" @click="submitForm('replenishment')"
        >确 定</el-button
      >
    </span>
  </div>
</template>

<script>
import api from "../../../api";

import {
  OrderRejectReason2,
  OrderRejectReason,
  productionList,
  ResponsibleDepartment,
} from "../../common/enum";
const debounce = (() => {
  let timer = null;
  return (callback, wait) => {
    clearTimeout(timer);
    timer = setTimeout(callback, wait);
  };
})();
export default {
  data() {
    return {
      dialogVisible: true,
      orderItem: {},
      rejectReason: [],
      replenishmentParams: {},
      replenishment: {
        angle: "",
        customer: "",
        checkPerson: "",
        checkPersonName: "",
        equipmentName: "",
        equipmentNumber: "",
        checkTime: "",
        createTime: "",
        dept: "",
        number: "",
        operator: "",
        operatorName: "",
        orderNo: "",
        production: "",
        reason: "",
        remark: "",
        specs: "",
        staffId: "",
        staffName: "",
        staffNo: "",
        status: "",
        useSpecs: "",
      },
      rules: {
        reason: [{ required: true, message: "请输入原因", trigger: "change" }],
        dept: [
          { required: true, message: "请选择责任部门", trigger: "change" },
        ],
        useSpecs: [{ required: true, message: "请输入", trigger: "blur" }],
        angle: [{ required: true, message: "请填写", trigger: "blur" }],
      },
      ruleForm: {
        stepsData: [],
        currentStep: 0,
        totalSteps: 0,
        stepsDesc: [],
        stepsDataSpec: [],
        currentStepSpec: 0,
        totalStepsSpec: 0,
        orderProduction: [],
        code: "",
        number: "",
        production: "",
        staffNumber: sessionStorage.getItem("staffNumber"),
        orderNo: "",
        specs: "",
        staff: sessionStorage.getItem("staff"),
        value: "",
        custNo: "",
        specs: "",
        num: "",
        ngNum: "",
      },
      list: [],
      checkList: [],
      numDialog: false,
      bsnum: 0,
      ngNum: 0,
      okNum: 0,
      ngCheck: "",
      totalCheck: "",
      totalNum: "",
      ngStr: "",
      okStr: "",
      orderNo: "",
      numStr: "",
      statusList: [],
      params: [],
      multipleTable: [],
      firstChar: "",

      code: "",
      lastTime: "",
      nextTime: "",
      lastCode: "",
      nextCode: "",
    };
  },
  created() {
    this.depart = ResponsibleDepartment;
  },
  watch: {
    "ruleForm.value": {
      handler: function (newVal, oldVal) {
        debounce(() => {
          if (newVal == "") {
            return true;
          }
          if (newVal.length < 2) {
            this.ruleForm.value = "";
            return;
          }
          console.info("value", this.ruleForm.value);
          if (
            this.ruleForm.value.indexOf("-") > -1 &&
            this.ruleForm.value != ""
          ) {
           
            this.ruleForm.code = this.ruleForm.value;
            this.ruleForm.orderNo = this.ruleForm.code.split("-")[0];
            this.ruleForm.number = this.ruleForm.code.split("-")[1];
            this.checkList.push(this.ruleForm.number);
            this.query();
          } else if (
            typeof this.ruleForm.value === "number" &&
            !isNaN(this.ruleForm.value)
          ) {
            // 当员工码处理
            if (this.ruleForm.value != "" && this.ruleForm.value != "0") {
              this.ruleForm.staffNumber = this.ruleForm.value;

              console.info(
                "开始查询员工信息，查询参数：" + this.ruleForm.staffNumber
              );
              api
                .staffFlow({ number: this.ruleForm.staffNumber })
                .then((res) => {
                  this.ruleForm.staff = res.data.name;
                  this.ruleForm.staffNumber = this.ruleForm.staffNumber;
                  sessionStorage.setItem("staff", this.ruleForm.staff);
                  sessionStorage.setItem(
                    "staffNumber",
                    this.ruleForm.staffNumber
                  );
                });
            }
          }
          this.ruleForm.value = "";
        }, 40);
      },
    },
  },
  mounted() {
    document.addEventListener("keydown", (e) => {
      console.info(e);
      if (e.srcElement.id == "bsnum" || e.srcElement.id == "ngnum") {
        return true;
      }
      // 不能包含：Enter Shift
      if ("EnterShift".indexOf(e.key) != -1) {
        return;
      }
      if (
        !isNaN(e.key) ||
        e.key == "-" ||
        e.key == "." ||
        e.key == "/" ||
        /^[a-zA-Z]*$/.test(e.key)
      ) {
        this.ruleForm.value = this.ruleForm.value + e.key;
      }
    });
  },
  methods: {
    query() {
      api
        .listReplenishment({
          orderNo: this.ruleForm.orderNo,
          number: this.ruleForm.number,
        })
        .then((res) => {
          this.list = res.data.list;
          this.ruleForm.production = res.data.production;
          this.ruleForm.specs = res.data.specs;
          api
            .queryReplenishmentParams({
              orderNo: this.ruleForm.orderNo,
              specs: res.data.specs,
            })
            .then((res) => {
              console.info("补料参数");
              console.info(res.data);
              this.replenishmentParams = res.data;
            });
        })
        .catch();
    },

    deptChange() {
      console.info(this.replenishment.dept);
      if ("材质" == this.replenishment.dept) {
        this.rejectReason = OrderRejectReason2;
      } else {
        this.rejectReason = OrderRejectReason;
      }
    },
    reset() {
      this.replenishment = {};
      this.list = [];
      this.ruleForm.specs = "";
      this.ruleForm.production = "";
      this.ruleForm.code = "";
    },
    submitForm(formName) {
      if (this.ruleForm.code == "") {
        this.$message.error("请先扫产品码");
        return;
      }

      if (this.checkList.length == 0) {
        this.$message.error("请先选择模具编码");
        return;
      }
      console.info(this.replenishment.dept )

      if (this.replenishment.dept == "" ||this.replenishment.dept == undefined) {
        this.$message.error("请先选择责任部门");
        return;
      }
      if (this.replenishment.reason == "") {
        this.$message.error("请先选择不良原因");
        return;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.replenishment.id = null;
          this.replenishment.orderNo = this.ruleForm.orderNo;
          this.replenishment.production = this.ruleForm.production;
          this.replenishment.specs = this.ruleForm.specs;
          this.replenishment.staffNo = this.ruleForm.staffNumber;
          this.replenishment.staffName = this.ruleForm.staff;
          this.replenishment.number = this.checkList.toString();
          console.info(this.replenishment);

          api
            .addList(this.replenishment)
            .then((res) => {
              this.reset();
            })
            .catch();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getProductionValue(label) {
      for (var i = 0; i < productionList.length; i++) {
        var item = productionList[i];
        console.info("item", item);
        if (label == item.label) {
          return item.value;
        }
      }
      return "";
    },

    querySubList(orderNo, production) {
      api
        .subNum({
          orderNo: orderNo,
          production: production,
        })
        .then((res) => {
          this.numDialog = true;
          this.subList = res.data.list;
        });
    },
  },
};
</script>

<style scoped>
.content {
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
}

.item {
  display: inline-block;
  width: 300px;
}

#form >>> .el-form-item__label {
  font-size: 14px !important;
  margin-top: 3px;
}

#form >>> .el-input--small .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}

#form >>> .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 1px;
  margin-top: 1px;
  margin-left: -10px;
}

.ruleForm {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  margin-left: 16%;
  width: 400px;
}

.table {
  position: absolute;
  top: 220px;
  margin-left: 43%;
  /* width: 520px; */
}

.production {
  position: absolute;
  font-size: 16px !important;
  color: gray;
}
.replenishment {
  width: 400px;
  margin-top: 290px;
  margin-left: 618px;
}

.line {
  display: block;
  width: 600px;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 178px !important;
}
.el-select > .el-input {
  display: block;
  width: 178px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 178px !important;
}
.line-left {
  display: inline-block !important;
  width: 300px;
}
.line-right {
  display: inline-block !important;
  width: 300px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 200px;
}

.class_title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  margin-left: 70%;
}
</style>